<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { indexInfo } from '../../api/index'
import * as echarts from 'echarts';

// 路由数据
const route = useRoute()

// 首页数据数据
const homeData = ref({
  typeList: [],
  types: [],
  user: {},
})

// 获取用户数据
const userInfo = computed(() => {
  return homeData.value.user
})

// 图片数据
const imgUrls = ref(['/dzf.png', '/dfw.png', '/yqx.png', '/ywc.png'])

// 
const lineChart = ref(null)
// 折线图引用
const chartRef = ref(null)
// 折线图数据
const chartData = reactive({
  xData: [],
  yData: [],
})


// 获取数据
async function getIndexInfo() {
  const { data } = await indexInfo()
  Object.assign(homeData.value, data.data)

  chartData.xData = homeData.value.typeList.map(item => item.date)
  chartData.yData = homeData.value.typeList.map(item => item.order_sum)

  // 渲染图表
  CreateChart()
}

// 创建图表
function CreateChart() {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(chartRef.value);

  // 设置图表的配置项和数据
  const option = {
    title: {
      text: '订单数据',
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      data: chartData.xData
    },
    yAxis: {
      type: 'value',
      name: '订单数量',
      max: 50
    },
    series: [
      {
        name: '订单',
        type: 'line',
        data: chartData.yData,
        smooth: true
      }
    ]
  };
  // 使用配置项和数据显示图表
  chart.setOption(option);
}

onMounted(() => {
  // 获取数据
  getIndexInfo()

})
</script>

<template>
  <PanelHead :route="route"></PanelHead>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card>
        <div class="user">
          <el-image style="width: 100px; height: 100px" :src="userInfo.user_img" lazy></el-image>
          <div class="titleText1">{{ userInfo.user_name }}</div>
        </div>
        <div class="mes">
          <div class="titleText2">当前权限: {{ userInfo.permission }}</div>
          <div class="titleText2">当前IP: {{ userInfo.ip }}</div>
        </div>
      </el-card>
    </el-col>
    <!-- 用户信息 -->
    <el-col :span="12">
      <div class="CarList">
        <div class="CarItem" :key="index" v-for="(item, index) in homeData.types">
          <div class="img">
            <el-image :src="imgUrls[index]"></el-image>
          </div>
          <div class="CarRight">
            <div class="titleText1">{{ item.num }}</div>
            <div class="titleText2">{{ item.state }}</div>
          </div>
        </div>
      </div>
    </el-col>
    <!-- 统计图 -->
    <el-col class="Chart" :span="24">
      <el-card>
        <div ref="chartRef" style="width: 100%; height: 400px;"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lane="less">
.el-row {
  margin: 20px 0;
}

.user {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cccccc5d;

  .titleText1 {
    font-size: 20px;
    font-weight: 600;
  }
}

.mes {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .titleText2 {
    font-size: 14px;
    font-weight: 550;
    color: rgb(142, 146, 146);
    margin-top: 5px;
  }

  .titleText2:nth-child(1) {
    margin-top: 20px;
  }
}

.CarList {
  height: 165px;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 40px;
  column-gap: 40px;

  .CarItem {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: 60px;
      height: 60px;
      background-color: rgb(217, 93, 83);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;

      .el-image {
        width: 50px;
        height: 50px;
      }
    }

    .CarRight {
      margin-left: 10px;

      .titleText1 {
        font-size: 24px;
        font-weight: 600;
      }
    }
  }

  .CarItem:nth-child(2) .img {
    background-color: rgb(110, 103, 180);
  }

  .CarItem:nth-child(3) .img {
    background-color: rgb(90, 180, 223);
  }

  .CarItem:nth-child(4) .img {
    background-color: rgb(92, 191, 90);
  }
}

.Chart {
  margin: 20px 0;
}
</style>
